<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="5">
                <span>&nbsp;&nbsp;</span>
            </el-col>
            <el-col :span="10">
                <el-input v-model="searchParam.title" size="small" placeholder="标题"></el-input>
            </el-col>
            <el-col :span="5">
                <el-button @click="queryTopic" type="primary" size="small">查询</el-button>
            </el-col>
        </el-row>
             
        <el-row>
            <el-col>
                <el-table :data="topicList">
                <el-table-column width="60" label="no" type="index"></el-table-column>
                <el-table-column width="200" label="标题" prop="title"></el-table-column>
                <el-table-column width="200" label="描述" prop="description"></el-table-column>
                <el-table-column width="300" label="图片" show-overflow-tooltip>
                         <template slot-scope="scope" v-if="scope.row!=null">
                            <viewer :images="scope.row.picListObj">
                                <template  v-for="(pic,index) in scope.row.picListObj">
                                    <img :key="index" :src="getFilePath(pic.fileNo)" class="preview-img"/>
                                </template>
                            </viewer>
                            <viewer :images="scope.row.thumbListObj">
                                <template  v-for="(pic,index) in scope.row.thumbListObj">
                                    <img :key="index" :src="getFilePath(pic.fileNo)" class="preview-img"/>
                                </template>
                            </viewer>
                        </template>

                </el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作">
                      <template slot-scope="scope">
                            <el-button type="text" @click="updateTopicObjInit(scope.row)">
                                    修改
                            </el-button>
                            <el-button type="text" @click="deleteTopicInit(scope.row)">
                                        删除
                            </el-button>
                      </template>
                </el-table-column>
            </el-table>
            </el-col>
        </el-row>
        <el-pagination
            @current-change="queryTopic"
            layout="prev, pager, next"
            :current-page ="page.current"
            :page-size ="page.size"
            :total="page.total">
        </el-pagination>

        <el-dialog :visible.sync="updateTopicFlag">
            <span v-if="updateTopicFlag">
                <div class="inline-form-item">
                    标题：<div style="width:300px"><el-input v-model="updateTopicObj.title" size="small"></el-input></div>
                </div>
                <div class="inline-form-item">
                    描述：<div style="width:500px"><el-input v-model="updateTopicObj.description" size="small" type="textarea"></el-input></div>
                </div>
                <div class="inline-form-item">
                    分类：<div style="width:500px"><el-select v-model="updateTopicObj.classifyId" size="small">
                                <el-option v-for="classify in classifyList"
                                :key="classify.id"
                                :label="classify.classify"
                                :value="classify.id"
                                ></el-option>
                        </el-select></div>
                </div>
                <div class="inline-form-item">
                    检索KEY：<div style="width:500px">
                            <el-select
                                v-model="updateTopicObj.keyListObj"
                                multiple
                                filterable
                                allow-create
                                default-first-option
                                reserve-keyword
                                remote
                                :remote-method ="queryKey"
                                :loading="loading"
                                placeholder="请选择文章标签">
                                <el-option
                                v-for="item in keyList"
                                :key="item.keyVal"
                                :label="item.keyVal"
                                :value="item.keyVal">
                                </el-option>
                            </el-select>


                    </div>
                </div>
                <div class="inline-form-item">
                   封面：<div style="width:500px;min-height:30px;" @drop="imagedrop" @dragover="allowDrop">
                        <template v-if="updateTopicObj.coverPicObj!=null">
                             <viewer :images="updateTopicObj.coverPicObj">
                                    <img :key="index" :src="getFilePath(updateTopicObj.coverPicObj.fileNo)" class="view-img-cover"/>
                             </viewer>
                        </template>
                        <template v-else>
                             <span>没有封面</span>
                        </template>
                    </div>
                </div>
                <div class="inline-form-item">
                    视频：<div style="width:500px">
                    <template  v-for="(video,index) in updateTopicObj.videoListObj">
                        <video :key="index" :src="getFilePath(video.fileNo)" class="preview-video" @click="playVideo(getFilePath(video.fileNo))"/>
                     </template>
                    </div>
                </div>
                <div class="inline-form-item">
                    图片：<div style="width:500px">
                         <viewer :images="updateTopicObj.picListObj">
                            <template  v-for="(pic,index) in updateTopicObj.picListObj">
                                <img :key="index" :src="getFilePath(pic.fileNo)" class="view-img" draggable="true" @dragstart="imagedrag($event,pic)"/>
                            </template>
                        </viewer>
                        <viewer :images="updateTopicObj.thumbListObj">
                            <template  v-for="(pic,index) in updateTopicObj.thumbListObj">
                                <img :key="index" :src="getFilePath(pic.fileNo)" class="view-img" draggable="true" @dragstart="imagedrag($event,pic)"/>
                            </template>
                        </viewer>       
                    </div>
                </div>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateTopicFlag = false">取消</el-button>
                <el-button type="primary" @click="submitData">提交</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="videoPlayFlag">
            <span v-if="videoPlayFlag" class="preview-video-play-box">
                <video class="video-js preview-video-play" id="playVideo">
                <source :src="videoUrl" type="video/mp4"/>
                </video>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="videoPlayFlag = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { queryTopicList,updateTopic,queryKey,queryClassify } from '@/api/topic'
export default {
    name:"topic",
    data(){
        return{
                topicList:[],
                page:{
                    current:1,
                    size:10,
                    total:0
                },
                searchParam:{
                    title:"",
                    keys:new Array()
                },
                updateTopicObj:null,
                updateTopicFlag:false,
                videoPlayFlag:false,
                videoUrl:"",
                keyList:[],
                loading:false,
                classifyList:[]
        }
    },
    methods:{

        filterMethod(val){
                this.queryKey();
                return true;
        },
        queryClassify(classify){
            queryClassify({classify:classify}).then((res)=>{
                    this.classifyList = res.data;
            }).catch(()=>{

            })
        },
        submitData(){
              let param = this.updateTopicObj;
              this.updateTopicFlag = false;
              updateTopic(param,false).then((res)=>{
                       this.updateTopicObj = null;
                       this.queryTopic(); 

              }).catch((error)=>{

              })
        },
        queryKey(key){
                this.loading = true;
                queryKey({size:20,key:key}).then((res)=>{
                       this.keyList =  res.data.records;
                       this.loading = false;
                }).catch(()=>{

                })
        },
        imagedrop(event){
            let f = JSON.parse(event.dataTransfer.getData("imageFile"));
            this.updateTopicObj.coverPicObj = f;    
        },
        imagedrag(event,pic){
            event.dataTransfer.setData("imageFile",JSON.stringify(pic));
        },
        allowDrop(event){
            event.preventDefault();
        },
        playVideo(url){
        this.videoPlayFlag = true;
        this.videoUrl = url;
        if(window.videoplay){
           window.videoplay.dispose();
        }
        setTimeout(()=>{
          window.videoplay = videojs('playVideo',{
            muted: false,
            controls: true,
            loop: false,
            autoplay:true
          })
        })
        },
        deleteTopicInit(){
                this.$confirm('确定要删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteTopic(id);        
                }).catch(() => {

                });
        },
        deleteTopic(id){

        },
        updateTopicObjInit(obj){
                this.updateTopicObj = obj;
                this.updateTopicFlag = true;
                this.queryClassify();
        },
        getFilePath(code){
            return process.env.VUE_APP_BASE_API2+"/file/load?fileNo="+code
        },
        queryTopic(){
            let param = JSON.parse(JSON.stringify(this.searchParam));
            param["keys"] =  param.keys.join(",");
            queryTopicList({...this.page,...param}).then((res)=>{
                    this.topicList = res.data.records;
                    this.page.total = res.data.total;
                    this.page.current =res.data.current;
                    this.page.size = res.data.size;
            }).catch(()=>{

            })
        }
    },
    mounted(){
        this.queryTopic();
    }
}
</script>

<style  scoped>
.preview-img{
    width:50px;
    height:40px;
    margin-left:1px;
}
.inline-form-item{
  display: flex;
  align-items: center;
  margin-top:10px;

}
.view-img{
    width:50px;
    height:40px;
}
.preview-video-play{
    width:100%;
    height:600px;
}
.preview-video{
    width:100px;
    height:100px;
}
.view-img-cover{
    width:90px;
    height:60px;
}
</style>


